<template>
  <div>
    <span>全选:</span>
    <input v-model="isAll" type="checkbox"/>
    <button @click="rev" >反选</button>
    <ul>
      <li v-for="(item,index) in arr" :key="index">
        <input v-model="item.c" type="checkbox"/>
        <span> {{item.name}} </span>
      </li>
    </ul>
  </div>
</template>

<script>
      /*需求1：小选影响全选
          1.1 将date数据使用 v-for 渲染添加至页面-->没有 id ,使用索引给key属性赋值
          1.2 给动态生成的 li 中的元素进行双向绑定数据变量-->复选框 (item.c)
          1.3 定义计算属性 isAll 并将其与全选功能的复选框进行双向绑定
          1.4 在计算属性的 (get) 函数体中,遍历 arr 中 item.c 的值,均为 true 则返回 true ,否则返回 false

        需求2:全选影响小选
          2.1 将计算属性写成完整形态,用set函数的形参接收双向绑定的boolean值(isAll的值是get函数的返回值,与传递过来的参数无关)
          2.2 遍历数组,将数组中的item.c状态修改为和set函数接受的值一致(注意,不是isAll的值-->get函数返回值)

        需求3：反选功能
          3.1 给反选按钮绑定点击事件
          3.2 在事件处理函数中,遍历arr给item.c取反
      */ 
export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    }
  },
  methods:{
    rev(){
      this.arr.forEach(item=>item.c=!item.c)
    }
  },
  computed:{
    isAll:{
      set(val){
        // console.log(val)
        this.arr.forEach(item=>item.c=val)
      },
      get(){
        let flag = true
        this.arr.forEach(item=>{
        if(!item.c){
          flag=false
        }
      })
      return flag
      }
    }
  }
}
</script>